<template>
	<div>
		<mt-swipe :auto='4000'>
			<!-- 在组件中使用 v-for 循环的话，一定要使用 key -->
			<!-- 将来，谁使用此轮播图组件，谁就要给此组件传递 lunbotuList 图片地址信息 -->
			<!-- 此时， lunbotuList 是通过父组件向子组件传值来设置的 -->
			<mt-swipe-item v-for='item in lunbotuList' :key='item.img'>
				<img :src="item.img" alt="" :class="{'full':isfull}">
			</mt-swipe-item>
		</mt-swipe>
	</div>


	<!-- 首页 和 商品详情 使用者调用此组件，在商品详情中展示轮播图效果为什么那么丑？
	问题分析：
	 1.首页中的图片它的宽高，都是使用了 100% 因为它需要这种效果
	 2.但是在商品详情页面中轮播图的图片，宽高 100% 页面就不好看了
	 3.商品详情页面中，它的需求是高度 100%就行，但是宽度需要自适应即可
	 4.经过分析，得到两者问题的原因：首页中的轮播图 和 商品详情中的轮播图，分歧点是 宽度到时需要100% 还是 自适应呢
	 5.既然这两个轮播图其他方面都没有冲突，只是宽度有分歧，那么我们可以定义一个属性，让使用轮播图的调用者，手动指定此属性的宽度是否为 100% 就可以解决了-->
</template>

<script>
	export default {
		// 接收存放父组件传递的值
		props: ["lunbotuList", "isfull"]
	}
</script>

<style lang="scss" scoped>
	.mint-swipe {
		height: 200px;
		text-align: center;

		img{
			/*width: 100%;*/
			height: 100%;
		}
	}

	.full {
		width: 100%;
	}
</style>